<html>
<head>
    <title>Circle w/ dataset</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAheS9Xi-Yv_ZyWjQrMAtLyxSXi3ULrnowvlcblO1CcYDzFprW4BSmWEaCS455H93bNLDyyoFMFv3drw" type="text/javascript"></script>
    <script src="CircleOverlay.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript" src="latlng.js"></script>
<script type="text/javascript" language="javascript" src="OpenError.js"></script>
<script type="text/javascript" language="javascript">

  	var ptsMSU = {"type":"MultiPoint",
				"coordinates":[ [42.731715,-84.48590], [42.730927,-84.48348], [42.730691,-84.48277], 
								[42.730352,-84.48175], [42.731455,-84.48167], [42.732440,-84.48387], 
								[42.732173,-84.48440] ]};

	// GEOJSON object containing a collection of data points with unknown error
  	var pts = {"type":"MultiPoint",
				"coordinates":[ [0,0] ]};
				
// <testing>
				 /*,[0,5],[0,10],
								[5,0],[5,5],[5,10],
								[10,0],[10,5],[10,10] ]};*/
	var r = document.getElementById("results");
// </testing>
    
	// A Precalculated array of distances from each point to all the others
		// Note how all the diagonal values are 0
    var dist = Array(
        Array(0, 5, 10, 5, 7.07, 11.18, 10, 11.18, 14.14),
        Array(5, 0, 5, 7.07, 5, 7.07, 11.18, 10, 11.18),
        Array(10, 5, 0, 11.18, 7.07, 5, 14.14, 11.18, 10),
        Array(5, 7.07, 11.18, 0, 5, 10, 5, 7.07, 11.18),
        Array(7.07, 5, 7.07, 5, 0, 5, 7.07, 5, 7.07),
        Array(11.18, 7.07, 5, 10, 5, 0, 11.18, 7.07, 5),
        Array(10, 11.18, 14.14, 5, 7.07, 11.18, 0, 5, 10),
        Array(11.18, 10, 11.18, 7.07, 5, 7.07, 5, 0, 5),
        Array(14.14, 11.18, 10, 11.18, 7.07, 5, 10, 5, 0)
        );
	var map;
	var oe;
	var disp;
	


var d;

function DrawObjects()
{
	var data = oe.generateDataset(); // generate a new data set with offset errors
	var original = oe.getDataSet(); // this seems redundant, but lets us change which data set we're using in the main load function alone
	var x;
	disp.addPoints();
	
	for(var i =0;i<data.length;i++)
	{
		
//var result="";for(var i=0;i<1000;i++){ var v = OpenError.prototype.Random.boxMuller();v.c=v.coordinates; if(v.c[0]>3 || v.c[0]<-3 || v.c[1]>3 || v.c[1]<-3) {result+=v.c[0]+", "+v.c[1]);}} alert('done');
		
		// create data for circle object
		var circle = new CircleOverlay(new GLatLng(original.coordinates[i][0],original.coordinates[i][1]), (oe.getStandardDeviation() / 1609.344), "#336699", 1, 1, '#336699', 0.25);
			
		var c = new CObject();
		c.overlay = circle;
		c.sd = 1;
		disp.c_objects.push(c);
		
		/*
		circle = new CircleOverlay(new GLatLng(original.coordinates[i][0],original.coordinates[i][1]), (oe.getStandardDeviation() * 6 / 1609.344), "#336699", 1, 1, '#336699', 0.25);
			
		c = new CObject();
		c.overlay = circle;
		c.sd = 6;
		disp.c_objects.push(c);*/
	}
	
	disp.showPoints();
}
	
	
    //<![CDATA[
    
    function LPObject()
    {
    	this.point; // GMarker object
    	this.origin; // GLatLng object
    	this.line;
    	this.visible = false;
    }
    
    function CObject()
    {
    	this.overlay;
    	this.visible = false;
    	this.sd; // number of standard deviations out
    }
    
    // -----
    // Object to hold the values for changing and rearranging display elements such as circles, lines.
    // -----
    function DispObject()
    {
    	this.map_id = "map";    	
    	this.c_objects = new Array();
    	this.circles_display = 0; // or 1 or 2 or 3
    	
    	this.lp_objects = new Array();
    	
		this.showCircles = function()
		{
			for(var i=0;i<this.c_objects.length;i++)
			{
				if(this.c_objects[i].visible == false)
				{
					map.addOverlay(this.c_objects[i].overlay);
					this.c_objects[i].visible = true;
				}
			}
		}

		this.hideCircles = function()
		{
			for(var i=0;i<this.c_objects.length;i++)
			{
				if(this.c_objects[i].visible == true)
				{
					map.removeOverlay(this.c_objects[i].overlay);
					this.c_objects[i].visible = false;
				}
			}
		}
	
		// functions for POINTS / LINES
		this.showPoints = function()
		{
			for(var i=0;i<this.lp_objects.length;i++)
			{
				if(this.lp_objects[i].visible == false)
				{
					map.addOverlay(this.lp_objects[i].point);
					this.lp_objects[i].visible = true;
				}
			}
		}

		this.hidePoints = function()
		{
			for(var i=0;i<this.lp_objects.length;i++)
			{
				if(this.lp_objects[i].visible == true)
				{
					map.removeOverlay(this.lp_objects[i].point);
					this.lp_objects[i].visible = false;
				}
			}
		}
		
		this.addPoints = function()
		{
			var data = oe.generateDataset(); // generate a new data set with offset errors
			var original = oe.getDataSet(); // this seems redundant, but lets us change which data set we're using in the main load function alone
			var x;
			for(var i =0;i<data.length;i++)
			{
				// Create our "tiny" marker icon
				//var blueIcon = new GIcon(G_DEFAULT_ICON);
				//blueIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
				//blueIcon.iconSize = new GSize(32,32);
				//blueIcon.shadow = "";
				//blueIcon.shadowSize = new GSize(0,0);
				//blueIcon.infoWindowAnchor = new GPoint(4,4);
				//blueIcon.anchor = new GPoint(2,2);


				//-add point to map v2
				var marker = new GMarker( new GLatLng(data[i].lat,data[i].lon) );//,{icon:blueIcon});
				var origin = new GLatLng( original.coordinates[i][0],original.coordinates[i][1]);
				var lp = new LPObject();
				lp.point = marker;
				lp.origin = origin;
				this.lp_objects.push( lp );
			}
			this.showPoints();
		}
		
		this.recalculatePoints = function()
		{
			// hide and remove the old points
			this.hidePoints();             // hide the markers so that multiple objects do maintain
			this.lp_objects = new Array(); // resets the lp_objects object
			
			// add a new set of points
			this.addPoints();
		}
    	

    	
    	// make sure that the first argument is a string type
    	//if(typeof arguments[0] === "string")
    	//{
    	//	this.map_id = arguments[0]; // set the string value of div holding the map canvas
    	//}
    	
    	
    	
    	
		
    	this.addCircle = function()
    	{
    		
    		// check to make sure the argument is a 
    		if(typeof arguments[0] === "function")
    		{
    			this.circles.push( arguments[0] );
    		}
    	};
    	
    };
    
    
    
    
    function load() {
       // if (isCompatible) {
            // Create Map
            map = new GMap2(document.getElementById("map"));
            var zoom = 5;
            map.setCenter(new GLatLng(5, 5), zoom);

            // Add controls
            map.addControl(new GLargeMapControl());
            map.addControl(new GMapTypeControl());
			

			
			// create a new openerror object for introducing controlled error
			oe = new OpenError();
			oe.setDistanceDataSet(dist);
			oe.setDataSet(pts);
			oe.setStandardDeviation(100000 ); //1609.344);
			oe.setDebug(true);
			oe.setCorrelated( false );
			//oe.set
			
			disp = new DispObject("map");
			DrawObjects();
			
			/*
			var polyline = new GPolyline([
			  new GLatLng(0.899830832, 0.899830832),
			  new GLatLng(0.899830832, -0.899830832),
			  new GLatLng(-0.899830832, -0.899830832),
			  new GLatLng(-0.899830832, 0.899830832),
			  new GLatLng(0.899830832, 0.899830832)
			], "#ff0000", 1);
			map.addOverlay(polyline);*/
			
			for(var i=0;i<=50;i++)
			{
				disp.addPoints();
			}

        //}
    }
    //]]>
    </script>
<style>
table,tr,td,th
{
	border: solid 1px gray;
}
</style>
</head>
<body onLoad="load()" onUnload="GUnload()">
	<div style="margin:auto;text-align:center;">
		<div id="mapWrapper" style="float: left;">
			<div id="map" style="width: 400px; height: 300px; border: 1px solid #666666;"></div>
		</div>
		<div style="margin-left: 400px;text-align:left">
			<strong>Points: </strong>
			<input type="button" onclick="disp.showPoints();" value="Show">
			<input type="button" onclick="disp.hidePoints();" value="Hide"><br/><br/>
			<strong>Circles: </strong>
			<input type="button" onclick="disp.showCircles();" value="Show">
			<input type="button" onclick="disp.hideCircles();" value="Hide"><br/>
			<div id="results"></div>
		</div>
		<div style="clear:both;"></div>
	</div>
	<div id="debug"></div>
</body>
</html>